<script setup lang="ts">
import { FormProps } from 'element-plus';
import { computed } from 'vue';
import { OptionalMutable } from '../../utils';
import { Refresh, Search } from '@element-plus/icons-vue';

const props = defineProps<{
  formConfig?: OptionalMutable<FormProps>
}>()

const emit = defineEmits(['reset', 'search'])

const cls = 'ui-search-form'

const formProps = computed<OptionalMutable<FormProps>>(() => {
  return {
    inline: true,
    labelWidth: '5em',
    ...(props.formConfig ?? {})
  }
})
</script>

<template>
  <div :class="cls">
    <ElForm :class="`${cls}_form`" v-bind="formProps" @submit.prevent>
      <slot></slot>
    </ElForm>
    <div :class="`${cls}_actions`">
      <ElButton type="primary" :icon="Search" @click="emit('search')">查询</ElButton>
      <ElButton :icon="Refresh"@click="emit('reset')">重置</ElButton>
    </div>
  </div>
</template>

<style lang="scss">
.ui-search-form {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--el-bg-color);
  padding: var(--page-margin) var(--page-margin) 0;
  margin-bottom: var(--page-margin);
  border-radius: 8px;
  &_form {
    flex: 1;
    width: 0;
    display: flex;
    flex-wrap: wrap;
    > * {
      width: 33%;
      min-width: 240px;
      max-width: 320px;
    }
  }
  .el-form-item {
    padding-right: var(--page-margin);
    margin-right: 0;
    margin-bottom: var(--page-margin);
  }
}
</style>
